<template>
  <div>
    <el-dialog title="分配权限" :visible.sync="quanxianShow" width="30%" :before-close="handleClose">
      <el-tree :data="arrList" :props="treeProps" ref="trees" show-checkbox node-key="id" default-expand-all :default-checked-keys="defayKeys"></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="quanding">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arrList: [],
      treeProps: {
        children: "children",
        label: "authName",
      },
      defayKeys:[]
    };
  },
  props: {
    quanxianShow: {
      type: Boolean,
      defaule: true,
    },
     node: {
      type: Object,
      required: false,
    },
  },
  watch: {
    quanxianShow(newval, oldval) {
      if (newval == true) {
        this.$axios.get("rights/tree").then((res) => {
            this.tg(this.node,this.defayKeys);
        
          this.arrList = res.data.data;
          console.log(res);
        });
      }
    },
  },
  methods: {
    //关闭
    handleClose() {
        this.defayKeys=[];
      this.$emit("quanxianClose");
    },
    //确定
    quanding() {
      const keys=[
          ...this.$refs.trees.getCheckedKeys(),
          ...this.$refs.trees.getHalfCheckedKeys()
      ];
      const strKeys=keys.join(',');
      this.$axios.post(`roles/${this.node.id}/rights`,{rids:strKeys}).then(res=>{
          console.log(res)
            if (res.data.meta.status == 200) {
              this.$message({
                type: "success",
                message: res.data.meta.msg,
              });
              this.$emit('undates')
            } else {
              this.$message({
                type: "error",
                message: "更新失败",
              });
            }
      })
      console.log(keys)
      this.$emit("quanxianClose");
    }, 
    
    tg(roes,arr){
        if(!roes.children){
          return arr.push(roes.id);
        };
        roes.children.forEach(item=>{
             this.tg(item,arr)
        })
    }
  },
};
</script>
<style lang='scss' scoped>
</style>